<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getReceiveCouponList, getCouponList, receiveCoupon, getCouponDetail } from '@/api/user'
	import { parseTime } from '@/utils/common'
	
	const loading = ref(false)
	const loadStatus = ref('loadmore')
	const navList = ref([{name: '可领取'}, {name: '未使用'}, {name: '已使用'}, {name: '已失效'}])
	const query = ref({status: 1, current: 1, size: 20})
	const triggered = ref(false)
	const total = ref(0)
	const list = ref([])
	
	function navChange(e) {
		let index = e.index
		if(query.value.status !== index) {
			query.value.status = index
			triggered.value = true
		}
	}
	function dealQuery() {
		let params = {}
		for (let name in query.value) {
			const value = query.value[name]
			if(value != undefined) params[name] = value
		}
		if(query.value.status != 0) {
			if(query.value.status === 1) {
				params.used = 0
				params.expire = 0
			} else if(query.value.status === 2) {
				params.used = 1
			} else if(query.value.status === 3) {
				params.expire = 1
			}
		}
		delete params.status
		return params
	}
	function refreshRequest(params) {
		if(query.value.status == 0) return getReceiveCouponList(params)
		else return getCouponList(params)
	}
	function refreshList() {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		triggered.value = true
		list.value = []
		query.value.current = 1
		let params = dealQuery()
		refreshRequest(params).then(res => {
			let result = res.result || {}
			let data = result.records || []
			data.forEach(item => item.expand = false)
			total.value = Number(result.total)
			list.value = data
			triggered.value = false
			let curLength = list.value.length
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
		}).catch(() => {
			triggered.value = false
			loadStatus.value = 'loadmore'
		})
	}
	function lowerList(noReplace = true) {
		if(list.value.length < total.value || !noReplace) {
			loadStatus.value = 'loading'
			query.value.current ++
			let params = dealQuery()
			refreshRequest(params).then(res => {
				let result = res.result || {}
				let data = result.records || []
				data.forEach(item => item.expand = false)
				total.value = Number(result.total)
				if(noReplace) {
					list.value.push(...data)
				} else {
					const preList = list.value.slice(0, (query.value.current - 1) * query.value.size)
					list.value = preList.concat(data)
				}
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	function refreshItem(id) {
		let index = list.value.findIndex(item => item.couponId === id)
		if(index != -1) {
			query.value.current = Math.floor(index / query.value.size)
			lowerList(false)
		}
	}
	function goReceive(id) {
		loading.value = true
		receiveCoupon(id).then(res => {
			uni.showToast({
				icon: 'success',
				title: '领取成功'
			})
			setTimeout(()=>{
				refreshItem(id)
			}, 200)
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function goUse() {
		uni.navigateTo({url: '/pages/shop/foodSelect'})
	}
	function changeExpand(item) {
		item.expand = !item.expand
	}
	
	onLoad(() => {
		triggered.value = true
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<uv-tabs :list="navList" :current="query.status" :activeStyle="{color: '#1A1816', fontWeight: 'bold'}" :inactiveStyle="{color: '#606060'}"  @change="navChange" lineWidth="60" :lineHeight="6" lineColor="#FF3E49" :scrollable="false"></uv-tabs>
		</view>
		<scroll-view scroll-y="true" class="app-content" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshList" lower-threshold="10" @scrolltolower="lowerList">
			<view class="content-list" v-if="list.length">
				<view class="list-box" v-for="item in list" :key="item.couponId">
					<view class="content-info">
						<view class="info-left">
							<view class="price">{{item.amount || 0}}</view>
							<view class="condition" v-if="item.useCondition">满{{item.useCondition}}可用</view>
							<view class="condition" v-else>无门槛</view>
						</view>
						<view class="info-center">
							<view class="name">{{item.couponName}}</view>
							<view class="data">{{parseTime(item.beginTime, '{y}.{m}.{d}') || ''}}-{{parseTime(item.endTime, '{y}.{m}.{d}') || ''}}</view>
						</view>
						<uv-button v-if="query.status === 0" size="small" color="linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%)" :custom-style="{width: '128rpx'}" shape="circle" text="立即领取" @click="goReceive(item.couponId)"></uv-button>
						<uv-button v-else-if="query.status === 1" size="small" color="linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%)" :custom-style="{width: '128rpx'}" shape="circle" text="立即使用" @click="goUse"></uv-button>
					</view>
					<view class="content-remake" v-if="item.remark">
						<view class="remake-des" :class="item.expand? '' : 'uv-line-1'">{{item.remark || '--'}}</view>
						<uv-icon :name="item.expand? 'arrow-up' : 'arrow-down'" color="#727687" size="30" @click="changeExpand(item)" 
							v-if="item.remark &&item.remark.length > 30 " />
					</view>
				</view>
				<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" marginTop="20" marginBottom="20" isDot line></uv-load-more>
			</view>
			<empty :text="'没有找到' + navList[query.status].name + '优惠券'" v-else></empty>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: 100vh;
		padding-top: 2rpx;
		.app-head{
			background-color: #FFFFFF;
		}
		.app-content{
			width: 100%;
			height: calc(100% - 88rpx);
			.content-list{
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				gap: 16rpx;
				.list-box{
					padding: 0 24rpx;
					background-color: #FEF3F1;
					border: 2rpx solid #FFFFFF;
					border-radius: 16rpx;
				}
			}
		}
		.content-info{
			padding: 24rpx 0;
			display: flex;
			align-items: center;
			gap: 24rpx;
			.info-left{
				width: 138rpx;
				text-align: center;
				.price{
					font-weight: 600;
					font-size: 40rpx;
					line-height: var(--theme-lg-line);
					color: #FF0D0D;
					&::before{
						content: "¥";
						font-size: 60%;
					}
				}
				.condition{
					margin-top: 4rpx;
					color: #FF0D0D;
					font-size: var(--theme-sm);
					line-height: var(--theme-sm-line);
				}
			}
			.info-center{
				width: calc(100% - 304rpx);
				.name{
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.data{
					margin-top: 12rpx;
					color: #877872;
					font-size: var(--theme-sm);
					line-height: var(--theme-sm-line);
				}
			}
		}
		.content-remake{
			padding: 24rpx 0;
			display: flex;
			align-items: flex-end;
			gap: 40rpx;
			border-top: 2rpx dashed #F8DAD4;
			.remake-des{
				width: calc(100% - 70rpx);
				color: #877872;
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
			}
		}
	}
</style>